<template>
	<view>
		<view class="mk-title">
			<view class="titlen">畅打卡</view>
			<view class="z-flex right-kg">
				<view class="kg" @click="amendCarefree"> <text :class="{'active-switch':switching}">开</text> <text :class="{'active-switch':!switching}">关</text> </view>
				<image src="../../static/add.png" mode="" @click="playShow = true"></image>
			</view>
		</view>
		
		<view class="name-id" v-for="(item,index) in list">
			<view class="mk-title">
				<view class="titlen">扫码领券包活动</view>
				<view class="z-flex right-kg">
					<view class="yk"> {{item.type_text}} </view>
					<image @click="delCarefree(item.id)" src="../../static/subtract.png" mode=""></image>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">单价设置 </view>
				<view class="img-box">
					<text class="z-padding-r-24">{{item.price}}</text>元
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">时间</view>
				<view class="z-flex">
					<!-- <view class="time-scope"> 00:00:00 </view>
					<text class="z-padding-lr-8">至</text>
					<view class="time-scope"> 23:59:59</view> -->
					<text>{{item.time}}</text>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">有效时长</view>
				<view class="z-flex">
					<input type="text" disabled placeholder="自购买后30天" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">赠送优惠券包</view>
				<view class="z-flex" @click="selectYhq(item)">
					<input v-if="item.coupon_ids" type="text" disabled placeholder="已选择" />
					<input v-else type="text" disabled placeholder="选择优惠券模板" />
					<image src="../../static/select-r.png" mode=""></image>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">可用桌台</view>
				<view class="img-box">
					5张台球桌
					<image class="z-padding-l-8" src="../../static/select-r.png" mode=""></image>
				</view>
			</view>
			
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="btn-s">
				<view class="btn1" @click="specify">发放给指定客户</view>
				<view class="btn2" @click="$authTo('/pages/Issuance-records/Issuance-records')">发放记录</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
		</view>
		
		<view style="height: 24rpx;width: 1rpx;"></view>
		<view class="illustrate-box">
			<view class="illustrate-title">—— 优惠券使用规则 ——</view>
			<view class="illustrate">
				检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败。 
				<br/><br/>
				检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败。 
				<br/><br/>
				检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败。 
			</view>
		</view>
		
		<u-popup closeable :round="10" :show="playShow" mode="center"  @close="close" @open="open">
		    <view class="popup-box">
		        <view class="pop-title">添加畅打卡</view>
				<view style="height: 40rpx;width: 1rpx;"></view>
				
				<view class="Options-box">
					<view class="Options" @click="option=0"> <image :src="option==0?'../../static/choosed.png':'../../static/choose.png'" mode=""></image>周卡 </view>
					<view class="Options" @click="option=1"> <image :src="option==1?'../../static/choosed.png':'../../static/choose.png'" mode=""></image>月卡 </view>
					<view class="Options" @click="option=2"> <image :src="option==2?'../../static/choosed.png':'../../static/choose.png'" mode=""></image>季度卡 </view>
					<view class="Options" @click="option=3"> <image :src="option==3?'../../static/choosed.png':'../../static/choose.png'" mode=""></image>半年卡 </view>
					<view class="Options" @click="option=4"> <image :src="option==4?'../../static/choosed.png':'../../static/choose.png'" mode=""></image>整年卡 </view>
				</view>
				
				
				<u-line length="520rpx" style="margin: auto;margin-top: 32rpx;"></u-line>
				
				<view style="height: 40rpx;width: 1rpx;"></view>
				<view class="each-title">单价设置</view>
				<view class="input">
					<input type="number" v-model="carefree_price" placeholder="请输入单价金额" />
				</view>
				
				<view style="height: 40rpx;width: 1rpx;"></view>
				<view class="each-title">可用时间段</view>
				<view class="input">
					<input style="width: 100rpx;" type="number" v-model="stime" placeholder="请输入" />
					至
					<input style="width: 100rpx;" type="number" v-model="ftime" placeholder="请输入" />
				</view>
				
				<view class="pop-btn" @click="addCarefree">添加</view>
		    </view>
		</u-popup>
		
		<view style="height: 24rpx;width: 1rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yhq: '',
				specifyUser:'',
				playShow:false,
				option:9,
				switching:0,
				list:[],//畅打卡列表
				carefree_price:'',
				stime:'',//开始时间
				ftime:'',//结束时间
				currentCarefree:'',//当前畅打卡
			}
		},
		onLoad() {
			this.switchCarefree()
			this.getList()
		},
		methods: {
			//删除畅打卡
			delCarefree(id){
				this.$api.post('/delCarefree',{
					id
				}).then(res => {
					this.$toast(res.msg)
					this.getList()
				}).catch(res => {
					
				})
			},
			//添加畅打卡
			addCarefree(){
				if(this.option == 9) return this.$toast('请选择畅打卡类型');
				if(!this.carefree_price) return this.$toast('请输入价格');
				if(!this.stime || !this.ftime) return this.$toast('请输入时间段');
				this.$api.post('/addCarefree',{
					type:this.option,
					price:this.carefree_price,
					time:this.stime + '-' + this.ftime
				}).then(res => {
					this.$toast(res.msg)
					this.playShow = false
					this.option = 9
					this.carefree_price = ''
					this.stime = ''
					this.ftime = ''
					
					this.getList()
				}).catch(res => {
					
				})
			},
			//畅打卡列表
			getList(){
				this.$api.post('/getMyCarefree').then(res => {
					this.list = res.data
				}).catch(res => {
					
				})
			},
			amendCarefree(){
				this.$api.post('/switchCarefree').then(res => {
					this.$toast(res.msg)
					this.switchCarefree()
				}).catch(res => {
					
				})
			},
			switchCarefree(){
				this.$api.get('/switchCarefree').then(res => {
					this.switching = res.data.is_carefree
					
				}).catch(res => {
					
				})
			},
			// 选择优惠包
			selectYhq(item){
				this.currentCarefree = item
				console.log(this.currentCarefree,'11111111')
				this.$skip('/pages/Select-coupon/Select-coupon?id=' + item.id, {
					selectYhq: (data) => {
						this.yhq = data.join(',');
						this.currentCarefree.coupon_ids = this.yhq
						console.log('666',this.yhq);
						this.editCarefree()
					}
				});
			},
			//修改畅打卡
			editCarefree(){
				console.log(this.currentCarefree,'222222')
				const { id, type, price ,time,tables_ids,coupon_ids} = this.currentCarefree;
				this.$api.post('/editCarefree',{
					id,
					type,
					price,
					time,
					tables_ids,
					coupon_ids
				}).then(res => {
					this.$toast(res.msg)
					this.list = []
					this.getList()
				}).catch(res => {
					
				})
			},
			specify(){
				this.$skip('/pages/Specify-issuance/Specify-issuance', {
					specify: (data) => {
						this.specifyUser = data;
						console.log('666',this.specifyUser);
					}
				});
			},
			open() {
			     // console.log('open');
			},
			close() {
				this.playShow = false
			    // console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.mk-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 32rpx 0 32rpx;
		.titlen {
			font-weight: bold;
			font-size: 28rpx;
			color: #1C274C;
		}
		.right-kg {
			.kg {
				margin-right: 32rpx;
				width: 108rpx;
				height: 40rpx;
				background: #EAEBEE;
				border-radius: 6rpx;
				font-size: 18rpx;
				color: #A4A9B7;
				line-height: 40rpx;
				text {
					display: inline-block;
					width: 54rpx;
					text-align: center;
				}
				text:nth-child(1){
					border-radius: 6rpx 0rpx 0rpx 6rpx;
				}
				text:nth-child(2){
					border-radius: 0rpx 6rpx 6rpx 0rpx;
				}
				.active-switch {
					background-color: #4BC264;
					color: #FFF;
				}
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	
	
	.name-id {
		width: 622rpx;
		padding: 0 32rpx 0 32rpx;
		margin: auto;
		background: #F7F8FA;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-top: 24rpx;
		
		.mk-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.titlen {
				font-weight: bold;
				font-size: 28rpx;
				color: #1C274C;
			}
			.right-kg {
				.yk {
					font-weight: 500;
					font-size: 28rpx;
					color: #1C274C;
					padding-right: 32rpx;
				}
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		
		.each {
			width: 558rpx;
			padding: 34rpx 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #1C274C;
			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #1c274c;
				text {
					color: #FF7B18;
				}
			}
			.time-scope {
				font-weight: 500;
				font-size: 28rpx;
				color: #A4A9B7;
			}
			.img-box {
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			.gly-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #6B738B;
			}
			input {
				font-size: 28rpx;
				text-align: right;
				width: 360rpx;
			}
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
		.btn-s {
			display: flex;
			justify-content: space-between;
			.btn1 {
				width: 356rpx;
				height: 90rpx;
				background: #4BC264;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}
			.btn2 {
				width: 242rpx;
				height: 90rpx;
				background: #FF7B18;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}
		}
		
		.explain {
			font-weight: 500;
			font-size: 22rpx;
			color: #6B738B;
			line-height: 36rpx;
			padding: 24rpx 0 0 0;
		}
	}
	
	
	.illustrate-box {
		width: 622rpx;
		padding: 32rpx;
		margin: auto;
		background: #EAEBEE;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		.illustrate-title {
			font-weight: bold;
			font-size: 24rpx;
			color: #1C274C;
			text-align: center;
		}
		.illustrate {
			padding-top: 32rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #6B738B;
		}
	}
	
	.popup-box {
		width: 520rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		padding: 40rpx;
		.pop-title {
			text-align: center;
			font-weight: 800;
			font-size: 36rpx;
			color: #1C274C;
		}
		
		.Options-box {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			
			.Options {
				margin-right: 42rpx;
				margin-top: 24rpx;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
					vertical-align: middle;
				}
				font-weight: 500;
				font-size: 28rpx;
				color: #A4A9B7;
			}
		}
		
		.each-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #1C274C;
			padding-bottom: 16rpx;
		}
		.input {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			width: 520rpx;
			background: #F7F8FA;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			input {
				padding: 26rpx 30rpx;
				font-size: 28rpx;
			}
		}
		.pop-btn {
			width: 520rpx;
			height: 90rpx;
			background: #4BC264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			margin-top: 64rpx;
		}
	}
</style>
